<template>
  <div v-if="!hasTelInfo">
    <div class="layer-pop" catchtouchmove="true">      
      <div class="get-phone-layer font-14">
        <div class="content-txt">
          <p>为保障商家能正常联系到「陛下」您</p>
          <p>请先授权手机号一下 ( &nbsp;•̆ ᵕ •̆  &nbsp;)◞♡</p>
        </div>
        <div class="flex v-align-c btn-bar">
          <button size="default" class="primary-button cancel-btn flex-item" @click="cancelEls">取消</button>
          <button size="default"
            class="primary-button sure-btn flex-item" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            朕允了
          </button>
        </div>
      </div>
      <div class="layer-bg" @click="cancelEls"></div>
    </div>
  </div>
</template>

<script>
  import { decrypt } from '@/api/wechat'
  import { setPhone } from '@/utils/auth'

  export default {
    data() {
      return {
        isComponents: true,
        userInfo: {},
        hasTelInfo: false
      }
    },
    props: {
      applyStatus: {
        default: null
      }
    },
    computed: {
      status() {
        return this.applyStatus
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.hasTelInfo = false
    },
    methods: {
      cancelEls() {
        this.hasTelInfo = true
        this.$emit('updatePhoneInfo')
      },
      getPhoneNumber(e) {
        if (e) {
          if (e.mp.detail.encryptedData) {
            // 保存电话号码
            decrypt({
              memberId: this.getCustomerId,
              encryptedData: e.mp.detail.encryptedData,
              iv: e.mp.detail.iv,
              type: 1
            }).then((res) => {
              if (res.isError) return
              if (res.data.phone) {
                setPhone(res.data.phone)
                this.hasTelInfo = true
                this.$emit('updatePhoneInfo')
                const scanApply = this.$pt.getStorageSync('scanApply')
                if (scanApply) {
                  let wholesaleAuthority = this.$pt.getStorageSync('wholesaleAuthority')
                  console.log(wholesaleAuthority)
                  if (this.status === 2 || this.status === null || (this.status === 1 && wholesaleAuthority === 0)) {
                    this.$pt.navigateTo({ url: '/pages/home/apply-wholesale/main' })
                  }
                }
              }
            }).catch(() => {
            })
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">  
  .layer-pop{
    .get-phone-layer{
      position: fixed;
      left: 50%;
      top: 50%;
      width: 310px;
      margin: -130px 0 0 -155px;
      background: #fff;
      border-radius: 8px;
      z-index: 20001;
      .content-txt{
        color: #818181;
        font-size: 16px;
        padding: 35px 25px 30px 25px;
      }
      .btn-bar{
        border-top: #e5e5e5 1px solid;
        button{
          background: none;
          font-weight: bold;
          border-radius: 0;
          height: 48px;
          line-height: 48px;
          padding: 0;
        }      
        button.cancel-btn{
          color: #333;
        }
        button.sure-btn{
          color: #000;
          border-left: #e5e5e5 1px solid;
        }
      }
    }
    .layer-bg{
      background: rgba(0, 0, 0, 0.3);
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 20000;
    }
  }
</style>
